<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>UI DEMO</title>
    <meta name="description" content="组件库和插件库">
    <meta name="generator" content="VitePress v1.0.0-rc.44">
    <link rel="preload stylesheet" href="/abs-ui-doc/assets/style.BgpjbcMt.css" as="style">
    
    <script type="module" src="/abs-ui-doc/assets/app.NcbvBTUB.js"></script>
    <link rel="preload" href="/abs-ui-doc/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/abs-ui-doc/assets/chunks/framework.BL0IJ4-B.js">
    <link rel="modulepreload" href="/abs-ui-doc/assets/chunks/theme.BthvYAMb.js">
    <link rel="modulepreload" href="/abs-ui-doc/assets/demos_Base_ElsMarkdown_mdv3.md.B5syA_AQ.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-91f95fec><!--[--><!--]--><!--[--><span tabindex="-1" data-v-5b19f3e1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-5b19f3e1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-91f95fec data-v-fc7b0ed4><div class="VPNavBar" data-v-fc7b0ed4 data-v-37299660><div class="wrapper" data-v-37299660><div class="container" data-v-37299660><div class="title" data-v-37299660><div class="VPNavBarTitle" data-v-37299660 data-v-11edf0f4><a class="title" href="/abs-ui-doc/" data-v-11edf0f4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/abs-ui-doc/vue.svg" alt data-v-e5319822><!--]--><span data-v-11edf0f4>组件库标题</span><!--[--><!--]--></a></div></div><div class="content" data-v-37299660><div class="content-body" data-v-37299660><!--[--><!--]--><div class="VPNavBarSearch search" data-v-37299660><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-37299660 data-v-43228b6f><span id="main-nav-aria-label" class="visually-hidden" data-v-43228b6f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/abs-ui-doc/guide/" tabindex="0" data-v-43228b6f data-v-c84d6c41><!--[--><span data-v-c84d6c41>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/abs-ui-doc/libs/" tabindex="0" data-v-43228b6f data-v-c84d6c41><!--[--><span data-v-c84d6c41>组件库</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/abs-ui-doc/plugins/" tabindex="0" data-v-43228b6f data-v-c84d6c41><!--[--><span data-v-c84d6c41>插件库</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-37299660 data-v-47c1fea6><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-47c1fea6 data-v-26b401be data-v-fd1c020d><span class="check" data-v-fd1c020d><span class="icon" data-v-fd1c020d><!--[--><span class="vpi-sun sun" data-v-26b401be></span><span class="vpi-moon moon" data-v-26b401be></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-37299660 data-v-af15f861 data-v-5cd70e58><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-5cd70e58 data-v-87dcca7e><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-37299660 data-v-7bb50b53 data-v-f9b1ba34><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-f9b1ba34><span class="vpi-more-horizontal icon" data-v-f9b1ba34></span></button><div class="menu" data-v-f9b1ba34><div class="VPMenu" data-v-f9b1ba34 data-v-33033a17><!----><!--[--><!--[--><!----><div class="group" data-v-7bb50b53><div class="item appearance" data-v-7bb50b53><p class="label" data-v-7bb50b53>Appearance</p><div class="appearance-action" data-v-7bb50b53><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-7bb50b53 data-v-26b401be data-v-fd1c020d><span class="check" data-v-fd1c020d><span class="icon" data-v-fd1c020d><!--[--><span class="vpi-sun sun" data-v-26b401be></span><span class="vpi-moon moon" data-v-26b401be></span><!--]--></span></span></button></div></div></div><div class="group" data-v-7bb50b53><div class="item social-links" data-v-7bb50b53><div class="VPSocialLinks social-links-list" data-v-7bb50b53 data-v-5cd70e58><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-5cd70e58 data-v-87dcca7e><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-37299660 data-v-827ba88d><span class="container" data-v-827ba88d><span class="top" data-v-827ba88d></span><span class="middle" data-v-827ba88d></span><span class="bottom" data-v-827ba88d></span></span></button></div></div></div></div><div class="divider" data-v-37299660><div class="divider-line" data-v-37299660></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-91f95fec data-v-72a02c01><div class="container" data-v-72a02c01><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-72a02c01 data-v-4f7ce968><button data-v-4f7ce968>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-91f95fec data-v-02b9f521><div class="VPDoc has-aside" data-v-02b9f521 data-v-5323408c><!--[--><!--]--><div class="container" data-v-5323408c><div class="aside" data-v-5323408c><div class="aside-curtain" data-v-5323408c></div><div class="aside-container" data-v-5323408c><div class="aside-content" data-v-5323408c><div class="VPDocAside" data-v-5323408c data-v-68285018><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-68285018 data-v-ee00fa7c><div class="content" data-v-ee00fa7c><div class="outline-marker" data-v-ee00fa7c></div><div class="outline-title" role="heading" aria-level="2" data-v-ee00fa7c>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ee00fa7c><span class="visually-hidden" id="doc-outline-aria-label" data-v-ee00fa7c> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ee00fa7c data-v-9c2859a9><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-68285018></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-5323408c><div class="content-container" data-v-5323408c><!--[--><!--]--><main class="main" data-v-5323408c><div style="position:relative;" class="vp-doc _abs-ui-doc_demos_Base_ElsMarkdown_mdv3" data-v-5323408c><div><h2 id="😲-md-editor-v3" tabindex="-1">😲 md-editor-v3 <a class="header-anchor" href="#😲-md-editor-v3" aria-label="Permalink to &quot;😲 md-editor-v3&quot;">​</a></h2><p>Markdown Editor for Vue3, developed in jsx and typescript, support different themes、beautify content by prettier.</p><h3 id="🤖-base" tabindex="-1">🤖 Base <a class="header-anchor" href="#🤖-base" aria-label="Permalink to &quot;🤖 Base&quot;">​</a></h3><p><strong>bold</strong>, <u>underline</u>, <em>italic</em>, <s>line-through</s>, superscript<sup>26</sup>, subscript<sub>1</sub>, <code>inline code</code>, <a href="https://github.com/imzbf" target="_blank" rel="noreferrer">link</a></p><blockquote><p>quote: I Have a Dream</p></blockquote><ol><li>So even though we face the difficulties of today and tomorrow, I still have a dream.</li><li>It is a dream deeply rooted in the American dream.</li><li>I have a dream that one day this nation will rise up.</li></ol><ul><li>[ ] Friday</li><li>[ ] Saturday</li><li>[x] Sunday</li></ul><p><img src="https://imzbf.github.io/md-editor-rt/imgs/mark_emoji.gif" alt="Picture"></p><h2 id="🤗-code" tabindex="-1">🤗 Code <a class="header-anchor" href="#🤗-code" aria-label="Permalink to &quot;🤗 Code&quot;">​</a></h2><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">MdEditor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">text</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MdEditor } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;md-editor-v3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;md-editor-v3/lib/style.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hello Editor!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="🖨-text" tabindex="-1">🖨 Text <a class="header-anchor" href="#🖨-text" aria-label="Permalink to &quot;🖨 Text&quot;">​</a></h2><p>The Old Man and the Sea served to reinvigorate Hemingway&#39;s literary reputation and prompted a reexamination of his entire body of work.</p><h2 id="📈-table" tabindex="-1">📈 Table <a class="header-anchor" href="#📈-table" aria-label="Permalink to &quot;📈 Table&quot;">​</a></h2><table><thead><tr><th>nickname</th><th>from</th></tr></thead><tbody><tr><td>zhijian</td><td>ChongQing, China</td></tr></tbody></table><h2 id="📏-formula" tabindex="-1">📏 Formula <a class="header-anchor" href="#📏-formula" aria-label="Permalink to &quot;📏 Formula&quot;">​</a></h2><p>Inline: $x+y^{2x}$</p><p>$$ \sqrt[3]{x} $$</p><h2 id="🧬-diagram" tabindex="-1">🧬 Diagram <a class="header-anchor" href="#🧬-diagram" aria-label="Permalink to &quot;🧬 Diagram&quot;">​</a></h2><div class="language-mermaid vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">mermaid</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">flowchart TD</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Start --&gt; Stop</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="🪄-alert" tabindex="-1">🪄 Alert <a class="header-anchor" href="#🪄-alert" aria-label="Permalink to &quot;🪄 Alert&quot;">​</a></h2><p>!!! note Supported Types</p><p>note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention</p><p>!!!</p><h2 id="☘️-em" tabindex="-1">☘️ em... <a class="header-anchor" href="#☘️-em" aria-label="Permalink to &quot;☘️ em...&quot;">​</a></h2></div></div></main><footer class="VPDocFooter" data-v-5323408c data-v-637b38a6><!--[--><!--]--><div class="edit-info" data-v-637b38a6><!----><div class="last-updated" data-v-637b38a6><p class="VPLastUpdated" data-v-637b38a6 data-v-7b3d4238>Last updated: <time datetime="2024-01-04T07:55:57.000Z" data-v-7b3d4238></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_info.md\":\"BG-vJLDy\",\"libs_zh_animation_elsanimationqueue.md\":\"DBqcmUZq\",\"libs_index.md\":\"BzAfaRZ6\",\"libs_zh_base_codeeditor.md\":\"DRgqc-1g\",\"libs_zh_base_dialogtable.md\":\"BvVUzI8i\",\"libs_zh_data_elsbutton.md\":\"DLlE0Iq4\",\"libs_zh_lowcode_elscontent.md\":\"BuMrfq6_\",\"index.md\":\"C61moqGG\",\"demos_base_elsmarkdown_test.md\":\"Bzu3x6bV\",\"libs_zh_base_elslistform.md\":\"D50gN5F2\",\"guide_quickstart.md\":\"CthXQ01c\",\"demos_base_elsmarkdown_mdv3.md\":\"B5syA_AQ\",\"libs_zh_base_elsscroll.md\":\"CTV5bb5i\",\"libs_zh_data_elsformdesign.md\":\"BSRREjnc\",\"guide_index.md\":\"DjcOZ4Tk\",\"libs_zh_base_modalok.md\":\"BNXkzpjJ\",\"libs_zh_data_elsicon.md\":\"CpwhQsq1\",\"libs_zh_base_elstable.md\":\"BMATHXuo\",\"libs_zh_base_elsmarkdown.md\":\"BEK8XP36\",\"libs_zh_base_elsform.md\":\"0M-u_KgY\",\"plugins_index.md\":\"Ck2b93WC\",\"libs_zh_base_jsonview.md\":\"DNGAEPF0\",\"libs_zh_group_selfselect.md\":\"BasWwPIY\",\"libs_zh_base_elselem.md\":\"BRXvaVxR\",\"libs_zh_base_elstableold.md\":\"B1Mtn7pj\",\"libs_zh_base_elsx6.md\":\"BNGozCm5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-cn\",\"dir\":\"ltr\",\"title\":\"UI DEMO\",\"description\":\"组件库和插件库\",\"base\":\"/abs-ui-doc/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/vue.svg\",\"siteTitle\":\"组件库标题\",\"outline\":3,\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/vitepress\"}],\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"组件库\",\"link\":\"/libs/\"},{\"text\":\"插件库\",\"link\":\"/plugins/\"}],\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"组件库介绍\",\"link\":\"/guide/\"}]}],\"/libs\":[{\"text\":\"基础分组\",\"collapsed\":true,\"items\":[{\"text\":\"抽象元素\",\"link\":\"/libs/zh/Base/ElsElem.md\"},{\"text\":\"抽象表单\",\"link\":\"/libs/zh/Base/ElsForm.md\"},{\"text\":\"自定义滚动条\",\"link\":\"/libs/zh/Base/ElsScroll.md\"},{\"text\":\"抽象表格\",\"link\":\"/libs/zh/Base/ElsTable.md\"},{\"text\":\"旧版表格组件\",\"link\":\"/libs/zh/Base/ElsTableOld.md\"},{\"text\":\"Markdown 编辑器\",\"link\":\"/libs/zh/Base/ElsMarkdown.md\"},{\"text\":\"代码编辑器\",\"link\":\"/libs/zh/Base/CodeEditor.md\"},{\"text\":\"JSON 数据展示\",\"link\":\"/libs/zh/Base/JsonView.md\"},{\"text\":\"表单集合\",\"link\":\"/libs/zh/Base/ElsListForm.md\"},{\"text\":\"弹框表格\",\"link\":\"/libs/zh/Base/DialogTable.md\"},{\"text\":\"自定义模态框\",\"link\":\"/libs/zh/Base/ModalOk.md\"}]},{\"text\":\"动效分组\",\"collapsed\":true,\"items\":[{\"text\":\"动画队列\",\"link\":\"/libs/zh/Animation/ElsAnimationQueue.md\"},{\"text\":\"幻灯片组件\",\"link\":\"/libs/zh/Animation/ElsPpt.md\"}]},{\"text\":\"数据分组\",\"collapsed\":true,\"items\":[{\"text\":\"图标\",\"link\":\"/libs/zh/Data/ElsIcon.md\"},{\"text\":\"抽象按钮\",\"link\":\"/libs/zh/Data/ElsButton.md\"},{\"text\":\"表单设计器\",\"link\":\"/libs/zh/Data/ElsFormDesign.md\"}]},{\"text\":\"低代码\",\"collapsed\":true,\"items\":[{\"text\":\"静态内容数据化\",\"link\":\"/libs/zh/LowCode/ElsContent.md\"}]}],\"/plugins\":[]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>